<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>translate落差</title>
    <style>
        .container {
            height: 500px;
            width: 500px;
            margin: 0 auto;
            overflow-y: scroll;
            perspective: 1px;
            transform-style: preserve-3d;
            border: 1px solid red;
        }
        .wrap {
            position: relative;
            height: 1000px;
        }
        .wrap > div {
            position: absolute;
            top: 200px;
            width: 50px;
        }
        .box1 {
            left: 30px;
            background: yellowgreen;
            transform: translateZ(-3px);
        }
        .box2 {
            left: 130px;
            background: cyan;
            transform: translateZ(-2px);
        }
        .box3 {
            left: 230px;
            background: chocolate;
            transform: translateZ(-1px);
        }
        .box4 {
            left: 330px;
            background: beige;
            transform: translateZ(-2px);
        }

    </style>
</head>
<body>

<div class="container">
    <div class="wrap">
        <div class="box1">这是div1</div>
        <div class="box2">这是div2</div>
        <div class="box3">这是div3</div>
        <div class="box4">这是div3</div>
    </div>
</div>

</body>
</html>
